import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'node:path'
import process from 'node:process'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
    // 如果设置为 / ，则Vite会将资源路径视为绝对路径。只能部署到根目录 
  base: process.env.NODE_ENV === 'production' ? './' : '/',
  // 静态资源目录
  publicDir: 'public',
  // 构建选项
  build: {
    outDir: 'dist', // 输出目录
    assetsDir: 'assets', // 静态资源存放目录
    sourcemap: false, // 生产环境是否生成 source map
    rollupOptions: {
      // 代码分割策略
      output: {
        manualChunks: {
          'vendor': ['react','react-router-dom','mobx','mobx-react'], // 将指定依赖打包为 vendor 文件
        },
        chunkFileNames: `static/js/[name].[hash].js`, // 代码分割后的文件命名
        entryFileNames: `static/js/[name].[hash].js`, // 入口文件命名
        assetFileNames: `static/[ext]/[name].[hash].[ext]`, // 静态资源文件命名
      }
    }
  },

  // 开发服务器配置
  server: {
    host: '0.0.0.0', // 可用的应用访问地址
    port: 3001, // 端口号
    open: true, // 自动打开浏览器
    proxy: {
      // API 代理配置（解决开发环境跨域问题）
      '/api1': { // 代理所有接口以 /api 开头的请求
        target: 'http://www.api.com', // 目标服务器地址
        changeOrigin: true, // 允许跨域
        rewrite: (path) => path.replace(/^\/api1/, '') // 重写路径
      },
    }
  },

  // 路径别名配置
  resolve: {
    alias: {
      '~': path.resolve(__dirname, './'), // 根目录别名
      '@': path.resolve(__dirname, './src') // src 目录别名
    },
    // 导入时想要省略的扩展名列表, 比如导入 component 的test组件，
    // 可以直接 import test from '@/components/test'，
    // 而不用 import test from '@/components/test.vue'
    extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
  },

  // CSS 配置
  css: {
    preprocessorOptions: {
      scss: {
        javascriptEnabled: true, // css预处理器，安装：npm i scss --save-dev
      }
    }
  },
})